<template>
  <div class="mallDetail">
    <course />
  </div>
</template>

<script>
import course from "@/views/courses/detail/detail_N"
export default {
  components: {
    course
  }
}
</script>

<style lang="stylus">
.mallDetail {
  .headerNav-content {
    li:nth-child(3), li:nth-child(4) {
      display: none;
    }
  }
  .studyAndstudent {
    display: none;
  }

  .courseDetail .course-main .mall-studyAndstudent {
      display: block;
      position: absolute;
      top: -250px;
      right: 0;

      .courseName {
        color: #1c1f21;
        letter-spacing: 1px;
        font-size: 28px;
        font-weight: 600;
        text-shadow: 0 0px 1px rgba(28,31,33,.6);
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .studyBox {
        padding: 21px 22px 30px;
        width: 320px;
        background-color: #ffffff;
        box-shadow: 0px 8px 16px 0px rgba(7, 23, 39, 0.1);
        border-radius: 20px;

        em {
          padding: 0 5px;
          color: #f20d0d;
          font-style: normal;
          font-weight: bold;
        }

        .speedOfProgress {
          margin-top: 5px;
        }

        .price {
          margin-top: 10px;
          font-size: 32px;
          color: #f01414;
          line-height: 32px;
          font-weight: 700;
          span {
            margin-left: 8px;
          }

          .oldPrice {
            font-size: 20px;
            color: #999999;
            text-decoration: line-through;
          }
        }

        .btn {
          background-image: linear-gradient(90deg,rgba(255,0,105,.99) 0,#ff7a00 99%) !important;
          border-radius: 24px;
          font-size: 16px;
          font-weight: bold;
        }
        
        .chooseTeacher {
          margin-bottom: 8px
          cursor: pointer;
          font-family: PMingLiU-ExtB;
          font-size: 14px;
          color: #666666;
          span:hover {
            color: #409EFF;
          }
        }
        .ischeckTeachered {
          display: flex;

          span {
            flex: 1;
            .startStudy {
              width: auto
            }
          }
          button {
            width: 100%;
          }
          
          .btn {
            flex: 1;
          }
        }

        .btn {
          cursor: pointer;
          outline: none;
          width: 275px;
          height: 45px;
          background-color: #f6ad35;
          border-radius: 30px;
          border: none;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #ffffff;
        }

        .contentBox {
          margin-top: 16px;

          .content {
            margin-top: 35px;

            .title {
              margin-top: 13px;
              font-family: PMingLiU-ExtB;
              font-weight: bold;
              font-size: 14px;
              color: #000000;
            }

            .desc {
              margin-top: 9px;
              font-family: PMingLiU-ExtB;
              font-size: 10px;
              color: #535353;
            }
          }

          .content:first-child {
            margin-top: 0;
          }
        }
      }
    }
}
</style>